@import "variables";
.divider {
  width: 100%;
  height: pxTorem(15px);
  background: color($h5, c9);
}

.login-title .seed-underline::before {
  display: none;
}

.login-header {
  position: relative;
  height: pxTorem(90px);
  color: color($h5, c2);
  text-align: center;
  @include font-dpr(34px);
  line-height: pxTorem(90px);
  padding: 0 pxTorem(47px);
  .login-cloesd {
    width: pxTorem(42px);
    height: pxTorem(42px);
    background: url(#{$icons-path}/Add.png) no-repeat center/contain;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: pxTorem(26px);
    left: pxTorem(45px);
  }
}

.page-login {
  &.ion-page {
    max-height: 100% !important;
  }
  #sportIp-header {
    &.sportIp-header-login {
      background: none;
      .toolbar-background {
        background: none;
        border: 0px;
      }
      .ion-ios-arrow-back {
        font-size: 0.6rem;
        color: white;
        display: block;
      }
    }
  }
  .login-content {
    padding: 0 pxTorem(45px) pxTorem(80px) pxTorem(45px);
    /* background: transparent;*/
    .check-code-box {
      display: flex;
      padding-top: pxTorem(46);
      padding-bottom: 0;
      .login-box {
        padding-top: 10px;
        margin-right: pxTorem(24);
      }
    } //密码
    .login-box-password {
      .delet-account {
        margin-right: pxTorem(70);
      }
      .login-box-input {
        input {
          width: 70%!important;
        }
      }
    }
    .login-box {
      position: relative;
      flex: 1;
      display: flex;
      padding-bottom: pxTorem(30px);
      background: url(#{$images-path}/login_hr.png) bottom center/contain repeat-x;
      .login-box-icon {
        width: pxTorem(30px);
        height: pxTorem(40px);
        display: flex;
        align-items: center;
      }
      .login-box-input {
        flex: 1;
        input {
          font-size: pxTorem(30px);
          width: 80%;
          background: transparent;
        }
      }
      .login-box-input {
        color: color($h5, c2);
        @include font-dpr(30px);
        &::-webkit-input-placeholder {
          color: color($h5, c4) !important;
        }
      }
      .delet-account {
        position: absolute;
        right: pxTorem(25px);
        top: pxTorem(10px);
        width: pxTorem(28px);
        height: pxTorem(28px);
        background-image: url(#{$icons-path}/delete-.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
      .close-psw {
        position: absolute;
        right: pxTorem(20px);
        top: pxTorem(20px);
        width: pxTorem(40px);
        height: pxTorem(14px);
        background-image: url(#{$icons-path}/according_close_icon.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
      .open-psw {
        position: absolute;
        right: pxTorem(20px);
        top: pxTorem(10px);
        width: pxTorem(40px);
        height: pxTorem(26px);
        background-image: url(#{$icons-path}/according_open_icon.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
    .login-box:after {
      display: inline-block;
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      transform: scaleY(0.5);
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #e8e8e8;
    }
    .phone-msg {
      height: pxTorem(70px);
      //margin-top: pxTorem(50px);
      width: 100%;
      div {
        p {
          line-height: pxTorem(70px);
        }
      }
    }
    .psw-msg {
      height: pxTorem(70px);
      p {
        line-height: pxTorem(70px);
      }
    }
  }
  .login-correlation-box {
    display: flex;
    @include font-dpr(28px);
    color: color($h5, c10);
    padding-top: pxTorem(30px);
    justify-content: space-between;
  }
  .third-party-login-box {
    display: flex;
    padding-top: pxTorem(145px);
    align-content: space-between;
    justify-content: space-around;
    div {
      width: pxTorem(114px);
      height: pxTorem(139px);
      &.for-wechat {
        background: url(#{$icons-path}/login_wechat.png) no-repeat center center/contain;
      }
      &.for-weibo {
        background: url(#{$icons-path}/login_weibo.png) no-repeat center center/contain;
      }
      &.for-qq {
        background: url(#{$icons-path}/login_qq.png) no-repeat center center/contain;
      }
    }
  } // .logo{
  //   position: absolute;
  //   bottom:  pxTorem(80px);
  //   left: 0;
  //   width: 100%;
  //   text-align: center;
  //   img{
  //     width: pxTorem(188px);
  //     height:pxTorem(60px);
  //   }
  // }
}

.login-button {
  width: 100%;
  height: pxTorem(90px);
  margin-top: pxTorem(50px);
  border-radius: pxTorem(10px); // border: 1px solid color($h5,c10);
  // background: rgba(255,255,255,0.2);
  button {
    border: 0;
    border-radius: pxTorem(8px);
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    background: color($h5, c1);
    @include font-dpr(30px);
    color: color($h5, c10);
    &[disabled] {
      // background: rgba(color($h5,c1),0.6);
      opacity: .4;
    }
  }
  &.register {
    margin-top: pxTorem(30px);
    button {
      border: 1px solid color($h5, c1);
      background: rgba(#fff, 0.6);
      color: color($h5, c1);
    }
  }
}

.error-msg {
  color: color($h5, c11);
  @include font-dpr(30px);
}

.logo-login {
  img {
    display: block;
    margin: pxTorem(30px) auto 0;
    width: pxTorem(245px);
    height: pxTorem(63px);
  }
}

.third-login-warp {
  padding: pxTorem(70px) 0 pxTorem(100px);
  .third-login-title {
    padding-bottom: pxTorem(36px);
    span {
      @include font-dpr(24px);
      @include set-color(c5);
      position: relative;
      z-index: 1000;
      padding: 0 pxTorem(6px);
      background-color: color(c10);
    }
    i {
      width: pxTorem(22px);
      height: 1px;
      background-color: color($h5,c5);
      z-index: 0;
    }
  }
  .third-login-btn {
    width: pxTorem(50px);
    height: pxTorem(50px);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-grow: 1;
  }
  .third-wechat {
    background-image: url(#{$icons-path}/login_wechat.png);
  }
  .third-weibo {
    background-image: url(#{$icons-path}/login_weibo.png);
  }
  .third-qq {
    background-image: url(#{$icons-path}/login_qq.png);
  }
}
// .check-code-box{
//   img{
//     width: pxTorem(200);
//     height: pxTorem(90);
//   }
// }
